<template v-cloak>
	<div class="lists-page">
		<ul>
			<li v-for="item in listData">
				<router-link :to="{ name: 'music_list', params: { id: item.dissid }}">
					<div class="img">
						<img :src=" item.imgurl">
						<p>
							<span>{{ item.createtime }}</span>
							<span>{{ item.listennum | numTofixed }}万</span>
						</p>
					</div>
					<p class="title">{{ item.dissname }}</p>
					<p class="classify">{{ item.creator.name }}</p>
				</router-link>
			</li>
		</ul>
		<div class="loading-mask" id="loading-mask" v-show="loading"><div class="loader"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" class="path"></circle></svg></div></div>
	</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  	name: 'ListItems',
  	data() {
  		return {
  			listData: [],
  			loading: false,
  		}
  	},
  	created() {
  		this.loading = true;
    	this.$store.dispatch('getClassifyList', this.categoryId).then((res) => {
        	this.listData = res.data.data.list
        	this.loading = false;
      	})
  	},
  	computed:{
		...mapState({
			categoryId: state => state.Play.categoryId,
		}),
	},
	filters: {
	  	numTofixed(num) {
	  		return (num/10000).toFixed(1)
	  	}
	},
  	mthods: {
  		
  	}
}
</script>

<style lang="stylus">
@import './../assets/stylus/loading.styl';
.lists-page
	background-color #f9f9f9
	padding-bottom 60px
	overflow hidden
	ul 
		padding 10px
		&:after,&:before 
			content ""
			clear both
			visibility hidden
			display block
			zoom 1
		li 
			float left 
			width 48%
			margin 0 1% 20px 
			a 
				text-decoration none
			.img 
				width 100%
				height 180px
				overflow hidden
				position relative
				img 
					height 100%
					margin-left 50%
					transform translateX(-50%)
				p 
					position absolute 
					width 100% 
					line-height 30px 
					color #fff 
					bottom 0 
					left 0
					padding 0 10px 
					box-sizing border-box
					font-size 12px
					span:last-child 
						float right
						
			.title 
				font-size 14px 
				line-height 1.3
				height 2.6em 
				overflow hidden
				margin 5px 0
			.classify
				color #999
				font-size 12px
</style>